<template>
  <a-drawer
    title="订单详情"
    :maskClosable="false"
    width=1150
    placement="right"
    :closable="false"
    @close="onClose"
    :visible="orderDetailVisiable"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
    <a-form :form="form" title="订单详情">
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="订单ID" v-bind="formItemLayout">
            <a-input read-only v-decorator="['mba00']" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label='收货人' v-bind="formItemLayout">
            <a-input read-only v-decorator="['mba18']" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label='提交时间' v-bind="formItemLayout">
            <a-input read-only v-decorator="['mbacdate']" style="width: 100%"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="订单金额" v-bind="formItemLayout">
            <a-input read-only v-decorator="['mba04']" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label='订单来源' v-bind="formItemLayout">
            <a-input read-only v-decorator="['mba08']" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label='订单状态' v-bind="formItemLayout">
            <a-input read-only v-model='actiStr' style="width: 100%"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <!--    订单详情表格-->
    <a-table :columns="columns"
             :dataSource="dataSource"
             :pagination="false"
             :loading="loading"
             :scroll="{ x: 900 }">
      <template slot="operation" slot-scope="text, record">
        <img src="https://mtt2019-1259412925.cos.ap-shanghai.myqcloud.com/mrbird/1.jpg" width="100" height="100">
      </template>
    </a-table>
    <div class="drawer-bootom-button">
      <a-button style="margin-right: .8rem" @click="onClose">取消</a-button>
    </div>
  </a-drawer>
</template>
<script>
const formItemLayout = {
  labelCol: {span: 6},
  wrapperCol: {span: 18}
}
export default {
  name: 'OrderDetail',
  props: {
    orderDetailVisiable: {
      default: false
    }
  },
  data () {
    return {
      actiStr: '',
      formItemLayout,
      form: this.$form.createForm(this),
      selectedRowKeys: [],
      dataSource: [],
      loading: false,
      sortedInfo: null,
      mbaFile: {},
      mbbFileList: []
    }
  },
  computed: {
    columns () {
      let {sortedInfo} = this
      sortedInfo = sortedInfo || {}
      return [{
        title: '订单编号',
        dataIndex: 'mbb01'
      }, {
        title: '商品缩略图',
        dataIndex: 'operation',
        scopedSlots: {customRender: 'operation'}
      }, {
        title: '商品ID',
        dataIndex: 'mbb02'
      }, {
        title: '商品名称',
        dataIndex: 'mbb04'
      }, {
        title: '商品品牌',
        dataIndex: 'mbb05'
      }, {
        title: '销售价格',
        dataIndex: 'mbb06'
      }, {
        title: '优惠金额',
        dataIndex: 'mbb09'
      }, {
        title: '实付',
        dataIndex: 'mbb10'
      }, {
        title: '商品分类ID',
        dataIndex: 'mbb08'
      }, {
        title: '购买数量',
        dataIndex: 'mbb07'
      }, {
        title: '商品属性',
        dataIndex: 'mbb11'
      }]
    }
  },
  methods: {
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    reset () {
      this.loading = false
    },
    onClose () {
      this.reset()
      this.$emit('close')
      this.$router.go(-1)
    },
    setTableValues (datas) {
      console.log(datas)
      this.dataSource = datas.mbbFileList
      this.mbaFile = datas.mbaFile
      let mab09 = datas.mbaFile.mba09
      if (mab09 === 0) {
        this.actiStr = '待付款'
      } else if (mab09 === 1) {
        this.actiStr = '待发货'
      } else if (mab09 === 2) {
        this.actiStr = '已发货'
      } else if (mab09 === 3) {
        this.actiStr = '已完成'
      } else if (mab09 === 4) {
        this.actiStr = '已关闭'
      } else {
        this.actiStr = '无效订单'
      }
      const bind = arr => data => arr.reduce((r1, r2) => {
        r1[r2] = this.$form.createFormField({
          value: data[r2]
        })
        return r1
      }, {})
      console.log(this.mbaFile)
      this.form = this.$form.createForm(this, {
        mapPropsToFields: () => {
          return bind(['mba00', 'mba18', 'mbacdate', 'mba04', 'mba08'])(this.mbaFile)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  @import "../../../../../static/less/Common";
</style>
